<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">
        <cpn></cpn>
        <cpn>
            <template v-slot:default="obj">
              <span>{{movides.data.join('=')}}</span>
              <!-- <span v-for="movide in movides.data">{{movide.join('=')}}</span> -->
          </template>
        </cpn>

    </div>


</body>


<template id="cpns">
  <div>
    <slot v-bind:data="movides">
      <ul>
        <li v-for="movide in movides">{{movide}}</li>
      </ul>
    </slot>
    
  </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            cpn: {
                template: '#cpns',
                data() {
                    return {
                        movides: ['巴啦啦小魔仙', '喜羊羊与灰太狼', '天线宝宝']

                    }
                },

            }
        }
    })
</script>